<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>lechart2</title>
    <!-- 引入 echarts.js -->
    <script src="command/echarts/echarts.min.js"></script>
    <script src="command/jquery/jquery-3.4.1.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:600px;"></div>
<script type="text/javascript">
        let appname = [];
        let echartData = [];
        var myChart = echarts.init(document.getElementById('main'));
        $.ajax({
            url: "/echartbingtu",         //设置数据访问接口
            method:"PUT",
            dataType:"json",
            async: false,
            success: function (data) {
                for (let i = 0; i < data.length; i++) {
                    appname.push(data[i].appname);
                    echartData.push({value:data[i].Dindex,name:data[i].appname});
                }
            },
            error :function(errorMsg) {//请求失败执行的方法
                alert("获取后台数据失败！");
            }
        });
        // 基于准备好的dom，初始化echarts实例
        var option = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 10,
                data: appname
            },
            series: [
                {
                    name: '应用名',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: echartData
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
</script>
</body>
</html>